<template>
  <div> 
     <div style="font-size: 20px;text-align: center;color:salmon;">小说类</div>
    <ul>
        <li class="bt">
        
            <span>名称</span>
            <span>单价</span>
            <span>书封</span>
            <span>选购</span>
        </li>
        <li v-for="item in list"  class="gr">
            
            <span>{{ item.title }}</span><br>
            <span>{{ item.price }}</span>
            <span><img :src="item.src" alt=""></span>
            <span><button @click="buy(item)" class="gman">购买</button></span>           
        </li>
    </ul>
   
  </div>
  <div style="font-size: 20px;text-align: center;color:salmon;">文学类</div>
  <li class="bt">
        
        <span>名称</span>
        <span>单价</span>
        <span>书封</span>
        <span>选购</span>
    </li>
  <div style="font-size: 20px;text-align: center;color:salmon;">短篇小说类</div>
  <li class="bt">
        
        <span>名称</span>
        <span>单价</span>
        <span>书封</span>
        <span>选购</span>
    </li>
  <div style="font-size: 20px;text-align: center;color:salmon;">长篇小说类</div>
  <li class="bt">
        
        <span>名称</span>
        <span>单价</span>
        <span>书封</span>
        <span>选购</span>
    </li>
</template>

<script setup>
import { onMounted,reactive } from "vue";
import goods from '../utils/shop.js'
import { useStore } from "../store";
import { storeToRefs } from 'pinia'
import { useRouter  } from "vue-router";
const list=reactive([])
const store=useStore()
const { total }=storeToRefs(store)
const router=useRouter()
onMounted(() => {
    goods.getGoodsList((data)=>{
        list.push(...data)        
    })
})
const buy=(v)=>{
    store.addProduct(v)
}
const toCart=()=>{
    router.push({name:'cart'})    
}
</script>

<style scoped>
*{
    background-color: rgba(244, 241, 221, 0.824);
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
li{
    width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
li img{
    width: 60px;
}
span{
    flex: 1;
    text-align: center;
    line-height: 60px;
}
.gr{
    width: 360px;
}
.gr img{
    width: 60px;
    height: 70px;
}
.bt{
    width: 370px;

}
.gman{
    width: 45px;
    height: 25px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition:  background-color 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
}
.gman:hover{
    color:#fff;
    background-color: rgba(125, 124, 124, 0.15);
}
</style>